import React from 'react';
import { Tooltip } from 'antd';

import styles from './index.less';

const MiniProgress = ({ target, color = 'rgb(19, 194, 194)', strokeWidth, percent }) => (
    <div className={styles.miniProgress}>
        <Tooltip title={`目标值: ${target}%`}>
            <div className={styles.target} style={{ left: target ? `${target}%` : null }}>
                <span style={{ backgroundColor: color || null }} />
                <span style={{ backgroundColor: color || null }} />
            </div>
        </Tooltip>
        <div className={styles.progressWrap}>
            <div
                className={styles.progress}
                style={{
                    backgroundColor: color || null,
                    width: percent ? `${percent}%` : null,
                    height: strokeWidth || null,
                }}
            />
        </div>
    </div>
);

export default MiniProgress;
